<template>
	<u-popup :show="privacyAuthPopup" mode="bottom" round="60" :customStyle="{position:fixed}">
		<view class="pop_content">
			<view class="pop_title">
				为给你提供更好的服务
			</view>
			<view class="des">
				允许我们在必要场景下，合理使用你的个人信息，并充分保障你的合法权利。请你在使用前仔细查阅以下协议条款，点击"允许"即表示你已阅读并同意对应的协议内容，
				<text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>
			</view>
			<view class="buttons">
				
				<button  class="agree btns" id="agree-btn" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">允许</button>
					<button  class="reject btns" @click="handleDisagree">拒绝</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'privacyPopup',
		props: {
			privacyAuthPopup: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				privacyContractName: '《象龟家小程序隐私协议》',
				projectName: '象龟家小程序'
			};
		},
		onLoad() {


			if (wx.onNeedPrivacyAuthorization) {
				wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
					console.log('触发本次事件的接口是：', resolve, eventInfo.referrer);
				});
			}
		},
		methods: {
			// 用户点击同意按钮后
			handleAgreePrivacyAuthorization() {
				this.triggerEvent('agree');
				this.disPopUp();
			},
			// 不同意
			handleDisagree() {
				this.triggerEvent('disagree');
				this.disPopUp();
				// 退出小程序
				uni.exitMiniProgram();
			},

			// 关闭
			disPopUp() {
				this.$emit("update:privacyAuthPopup",false)
			},
			triggerEvent(e) {
				if (wx.onNeedPrivacyAuthorization) {
					wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
						resolve({
							buttonId: 'agree-btn',
							event: e
						});
					});
				}
			},
			// 跳转小程序协议
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: (res) => {
						console.log('openPrivacyContract success');
					},
					fail: (res) => {
						console.error('openPrivacyContract fail', res);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pop_content {
		padding: 20px;
		background-color: #fff;
		text-align: justify;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		z-index: 1000000;
	}
	.pop_title{
		font-size: 18px;
		font-weight: 700;
		color: #333;
		margin-bottom: 12px;
	}
	.link{
		color: #676b8e;
		padding-top: 12px;
	}
	.des{
		font-size: 14px;
		color: #999;
		margin-bottom: 12px;
	}
	.buttons .btns{
		font-size: 14px;
		border: transparent;
		color: #576a92;
	}
	.agree{
		background-color: #e8f2fe;
		color: #2358b4;
	}
</style>